<template>
    <div id="tmpl">
        <div class="title">
            <h3 v-text="info.title">标题</h3>
            <p>{{info.add_time|datefmt('MMMM Do YYYY, h:mm:ss a')}} {{info.click}}次浏览</p>
        </div>
        <div id="content" v-html="info.content">
        </div>
        <!--10.2 实现评论组件-->
        <comment :id="id"></comment>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import common from '../../common/common.js';

    //导入评论组件 comment.vue
    import comment from '../subcom/comment.vue';

    export default {
        components: {
            comment  // 10.1 注册评论组件
        },
        data() {
            return {
                id: 0,
                info: {
                    // "id": 1,
                    // "title": '微软桌面 5.0 新版体验：时间线功能给力',
                    // "add_time": '2018-10-17T03:59:33.000Z',
                    // "click": 1,
                }
            }
        },
        created() {
            //获取url传入的值赋值给data中的id属性
            this.id = this.$route.params.id;

            //请求服务器获取到的id对应的详情数据对象
            this.getinfo();
        },
        methods: {
            getinfo() {
                var url = common.apidomain + '/vue/newsinfo.php';

                //利用$http.get方法请求到数据
                this.$http.get(url).then(function (res) {
                    //获取到响应报文体数据
                    var body = res.body;
                    if (body.status != 0) {
                        Toast(body.message);//mint组建
                        return;
                    }

                    // 如果服务器返回的数据正常则赋值给list
                    this.info = body.message[0];
                })
            }
        }
    }
</script>

<style scoped>
    .title h3 {
        color: #0094ff;
    }

    .title p {
        color: rgba(0, 0, 0, 0.4);
    }

    .title.#content {
        padding: 5px;
    }
</style>